<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font-size: 20pt;
        }
        /* span{
            font-size: 50px;
        } */
        /* 伪元素，表示页面中一些特殊的并不真实的存在的元素(特殊的位置)
            伪元素使用::开头
            ::first-letter 表示第一个字母
            ::first-line 第一行
            ::selection 表示选中的内容
            ::before 表示元素开始
            ::after 表示元素结尾
              before after 必须结合content属性使用
        */

        p::first-letter{
            font-size: 50px;
        }

        p::first-line{
            background-color: yellow;
        }

        p::selection{
            background-color: greenyellow;
        }
        div::before{
            content: "abc";
            color: red;
        }

        div::after{
            content: "haha";
            color: red;
        }


    </style>
</head>
<body>
    <div>我是一个div</div>
    <p>
       <span>滴</span>滴滴发的发的发打发打发打发放大东方
    </p>
    <p>
        <span>滴</span>滴滴发的发的发打发打发打发放大东方
    </p>

    <p>
        滴滴发的发的发打发打发打发放大东方
    </p>
</body>
</html>